<template>
  <el-row justify="space-between">
    <el-col :span="4">
      <date-time-range-picker v-model="dateTimeRange"/>
    </el-col>
    <el-col :span="2">
      <el-button type="primary" @click="updateDeviceRecordFn" :loading="updateLoading">更新</el-button>
    </el-col>
  </el-row>
  <el-table :data="vehicleInfos" stripe border class="mt-1" v-loading="isLoading">
    <el-table-column label="车票号" prop="vehicleInfo"/>
    <el-table-column label="使用人" prop="userName"/>
    <el-table-column label="胎压" prop="tirePressure"/>
    <el-table-column label="外观清洁度" prop="vehicleAppearance"/>
    <el-table-column label="开始时间" prop="startTime"/>
    <el-table-column label="结束时间" prop="endTime"/>
  </el-table>

  <Pagination v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              v-model:total="total"/>
</template>

<script setup lang="ts">
import {useMutation, useQuery} from "@pinia/colada";
import {getVehicleRecord, updateVehicleRecord} from "../../../api/record.ts";
import DateTimeRangePicker from "../../../components/DateTimeRangePicker.vue";
import {ref} from "vue";
import dayjs from 'dayjs'
import {ElMessage} from "element-plus";
import Pagination from "../../../components/Pagination.vue";
import {usePagination} from "../../../hooks/pagination.ts";

const dateTimeRange = ref<[Date?, Date?]>([])

let {currentPage, pageSize, total} = usePagination();

let {data: vehicleInfos, isLoading} = useQuery({
  key: () => ['vehicleInfos', dateTimeRange.value, currentPage.value, pageSize.value],
  query: () => getVehicleRecord({
    startTime: dayjs(dateTimeRange.value[0]).format('YYYY-MM-DD HH:mm'),
    endTime: dayjs(dateTimeRange.value[1]).format('YYYY-MM-DD HH:mm'),
    pageNum: currentPage.value,
    pageSize: pageSize.value
  }).then((res) => {
    total.value = res.total
    return res.records;
  }),
  enabled: () => dateTimeRange.value[0] != undefined && dateTimeRange.value[1] != undefined
});


let {mutate: updateDeviceRecordFn, isLoading: updateLoading} = useMutation({
  mutation: () => updateVehicleRecord(),
  onSuccess: () => {
    ElMessage.success("更新成功！")
  }
});
</script>

<style scoped>

</style>